<template>
  <div class="container">
    <!-- 跳转查看配方 -->
    <div class="link_to_arrangement"></div>

    <!-- 探索更多 -->
    <div class="link_to_sarch" @click="linkToUrl"></div>

    <!-- 面霜配方 -->
    <div class="face_cream_formula" @click="linkToPath('/facf')"></div>

    <!-- 彩妆配方 -->
    <div class="makeup_ormula" @click="linkToPath('/mkor')"></div>

    <!-- 护肤配方 -->
    <div class="skincare_formula" @click="linkToPath('/skc')"></div>

    <!-- 洗护配方 -->
    <div class="washing_formula" @click="linkToPath('/wshf')"></div>

    <template v-if="isShowIframe">
      <!-- <iframe
        src="https://www.dkshdiscover.com.cn/formulations-lib/8"
        style="width: 100%; height: 100vh"
      ></iframe> -->

      <webview id="myWebView" src="https://www.dkshdiscover.com.cn/" style="width: 100%; height: 100vh"></webview>

      <div class="float-button">
        <div class="btn-home" @click="jumpHomePage">主页</div>
        <div class="btn-back" @click="jumpBack">返回</div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
// const htmlContent = ref("");
const isShowIframe = ref(false);
const router = useRouter();
const linkToPath = (path) => {
  router.push({
    path,
  });
};

const jumpHomePage = () => {
  isShowIframe.value = false;
  router.replace("/home");
};

const jumpBack = () => {
  isShowIframe.value = false;
};

const linkToUrl = () => {
  isShowIframe.value = true;
};
</script>

<style scoped>
.container {
  background: url("../assets/banner.gif") no-repeat;
  background-origin: 100% 100%;
  background-size: contain;
  width: 100%;
  /* min-height: 100vh; */
  aspect-ratio: 9/16;
  /* overflow: hidden; */
  overflow: auto;
  position: relative;
}

.html_content {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 66;
}

.link_to_arrangement {
  position: absolute;
  width: 80%;
  height: 12vh;
  top: 4.5%;
  left: 15.5%;
  cursor: pointer;
}

.link_to_sarch {
  position: absolute;
  width: 80%;
  height: 8vh;
  bottom: 11%;
  left: 3.5%;
  cursor: pointer;
}

.face_cream_formula {
  position: absolute;
  top: 27.6%;
  left: 7.4%;
  width: 20vw;
  height: 20vw;
  position: absolute;
  /* background: red; */
  border-radius: 50%;
  cursor: pointer;
}

.makeup_ormula {
  position: absolute;
  top: 46%;
  left: 5%;
  width: 20vw;
  height: 20vw;
  position: absolute;
  /* background: red; */
  border-radius: 50%;
  cursor: pointer;
}

.skincare_formula {
  position: absolute;
  top: 25%;
  right: 11.5%;
  width: 17vw;
  height: 17vw;
  position: absolute;
  /* background: red; */
  border-radius: 50%;
  cursor: pointer;
}

.washing_formula {
  position: absolute;
  top: 42.5%;
  right: 5%;
  width: 17vw;
  height: 17vw;
  position: absolute;
  /* background: red; */
  border-radius: 50%;
  cursor: pointer;
}

.float-button {
  z-index: 999;
  position: fixed;
  bottom: 5%;
  left: 3%;
  user-select: none;
  display: flex;
  flex-wrap: nowrap;
}

.btn-home,
.btn-back {
  background-color: red;
  color: white;
  width: 8vw;
  height: 4vw;
  padding: 2vw 3vw;
  text-align: center;
  border-radius: 4px;
  /* font-size: 4vw; */
  line-height: 4vw;
  border: none;
  box-shadow: 0 0 1vw 0.4vw rgba(214, 18, 18, 0.4);
  margin-bottom: 6vw;
  cursor: pointer;
}

.btn-back {
  margin-left: 2vw;
}

webview {
  background: #FFFFFF;
  position: absolute;
  width: 100%;
  height: 100vh;
  z-index: 999;
}
</style>
